<template>
  <div>
    <!-- 表格 -->
    <el-table border :data="skuInfo.records" stripe style="width: 100%;margin-top:20px">
      <el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
      <el-table-column prop="skuName" label="名称" width="180"></el-table-column>
      <el-table-column prop="skuDesc" label="描述"></el-table-column>
      <el-table-column prop="image" label="默认图片">
        <template v-slot="{row,$index}">
          <img :src="row.skuDefaultImg" style="width:100px;height:100px" alt />
        </template>
      </el-table-column>
      <el-table-column prop="weight" label="重量(KG)" width="80"></el-table-column>
      <el-table-column prop="price" label="价格(元)" width="80"></el-table-column>
      <el-table-column prop="operation" label="操作">
        <template v-slot="{row,$index}">
          <!-- 点击下架 -->
          <el-button type="success" icon="el-icon-bottom" size="mini" v-if="row.isSale === 1" @click="offSale(row)"></el-button>
          <!-- 点击上架 -->
          <el-button type="info" icon="el-icon-top" size="mini" v-else @click="onSale(row)"></el-button>
          <el-button type="primary" icon="el-icon-edit" size="mini" @click="$message.info('功能正在开发中哟~')"></el-button>
          <el-button type="info" icon="el-icon-info" size="mini" @click="getSkuDetail(row)"></el-button>
          <el-button type="danger" icon="el-icon-delete" size="mini"></el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页器 -->
    <el-pagination
      :current-page="1"
      :page-sizes="[3, 5, 10, 20]"
      :page-size="limit"
      layout="prev, pager, next, jumper, ->, sizes, total"
      :total="total"
      style="text-align:center;margin-top:30px"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    ></el-pagination>

    <!-- 查看sku详情抽屉 -->
    <el-drawer title="SKU详细信息" size="50%" :visible.sync="drawer" :direction="direction" :before-close="handleClose">
      <!-- 属性 -->
      <el-row>
        <el-col :span="4">属性</el-col>
        <el-col :span="16">{{skuDetail.skuName}}</el-col>
      </el-row>
      <!-- 描述 -->
      <el-row>
        <el-col :span="4">描述</el-col>
        <el-col :span="16">{{skuDetail.skuDesc}}</el-col>
      </el-row>
      <!-- 价格 -->
      <el-row>
        <el-col :span="4">价格</el-col>
        <el-col :span="16">{{skuDetail.price}}</el-col>
      </el-row>
      <!-- 平台属性 -->
      <el-row>
        <el-col :span="4">平台属性</el-col>
        <el-col :span="16">
          <el-tag
            type="success"
            style="margin-right:10px"
            v-for="attrValue in skuDetail.skuAttrValueList"
            :key="attrValue.id"
          >{{attrValue.attrName}}:{{attrValue.valueName}}</el-tag>
        </el-col>
      </el-row>
      <!-- 商品图片 -->
      <el-row>
        <el-col :span="4">商品图片</el-col>
        <el-col :span="16">
          <el-carousel height="212px" trigger="click">
            <el-carousel-item v-for="item in skuDetail.skuImageList" :key="item.id">
              <img :src="item.imgUrl" alt style="width:512px;height:512px" />
            </el-carousel-item>
          </el-carousel>
        </el-col>
      </el-row>
    </el-drawer>
  </div>
</template>

<script>
export default {
  name: 'Sku',
  data () {
    return {
      // 当前页码
      page: 1,
      // 每页数据条数
      limit: 5,
      // 总数据数
      total: 0,
      // sku列表数据
      skuInfo: {},
      // 抽屉弹窗状态（false关闭，true打开）
      drawer: false,
      // 抽屉打开方向（rtl，从右到左）
      direction: 'rtl',
      // 被选中的sku详细信息
      skuDetail: {}
    }
  },
  methods: {
    // 数据条目改变回调
    handleSizeChange (limit) {
      // console.log(limit)
      this.limit = limit
      this.getSkuInfo()
    },

    // 页码改变时回调
    handleCurrentChange (page) {
      // console.log(page)
      this.page = page
      this.getSkuInfo()
    },

    // 获取skuInfo
    async getSkuInfo () {
      const { page, limit } = this
      const result = await this.$api.sku.reqSkuInfo(page, limit)
      this.skuInfo = result.data
      this.total = result.data.total
    },

    // 上架
    async onSale (sku) {
      const result = await this.$api.sku.reqOnSale(sku.id)
      sku.isSale = 1
      this.$message.success('上架成功')
      // this.getSkuInfo()
    },

    // 下架
    async offSale (sku) {
      const result = await this.$api.sku.reqdeleteSku(sku.id)
      sku.isSale = 0
      this.$message.success('下架成功')
    },

    // 关闭弹窗前回调
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => { })
    },

    // 获取sku详细信息
    async getSkuDetail (sku) {
      // console.log(sku)
      this.drawer = true
      const result = await this.$api.sku.reqSkuById(sku.id)
      this.skuDetail = result.data
    }
  },
  mounted () {
    // 获取sku页数据
    this.getSkuInfo()
  },
}
</script>

<style scoped>
.el-col-4 {
  font-size: 18px;
  text-align: right;
}

.el-col {
  margin: 10px;
}

/* 深度选择器 */
>>> .el-carousel__button {
  width: 15px;
  height: 15px;
  background-color: red;
  opacity: 0.3;
  border-radius: 50%;
}
</style>
